<template>
  <div>
    <!--public公共区域1，开始-->
    <a name="fhdd"></a>
    <!--最顶层导航栏，开始-->
    <div class="top-nav">
      <div class="bx">
        <div class="fl" v-if="!name">
          <ul>
            <li>欢迎你!</li>
            <li>请 <a @click="toLogin">登录</a></li>
            <li><a @click="toReginter">免费注册</a></li>
          </ul>
        </div>
        <div class="fl" v-if="name">
          <ul>
            <li>欢迎你{{ name }}</li>
            <li @click="exit"><a>退出</a></li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li><a>我的订单</a></li>
            <li><a>企业采购</a></li>
            <li class="v"><a>客户服务</a></li>
            <li class="v"><a href="#">网站导航</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!--最顶层导航栏，结束-->
    <!--logo部分搜索框，开始-->
    <div class="head-logo bx">
      <img style="width: 50px;" src="@/assets/logo.png" />
      <span style="line-height: 40px;margin-left: 30px;font-weight: 700;font-size: 30px;">扶农助农平台</span>
      <!--子盒子center，中间放置搜索框-->
      <div class="gou">
        <a>
          <!-- <img src="img/gwc.png" /> -->
          我的购物车
          <div class="red8">8</div>
        </a>
      </div>
    </div>
    <!--logo部分搜索框，结束-->
    <!--分类部分，开始-->

    <div class="top-fen">
      <div class="bx">
        <div class="left">
          <ul>
            <li>秒杀</li>
            <li>即将售罄</li>
            <li>超值低价</li>
          </ul>
        </div>
        <div class="left1">
          <ul>
            <li>基础农产品</li>
            <li class="font-red">农产品</li>
            <li>农作物</li>
            <li>蛋类</li>
            <li>手工艺品</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="Apple bx">
      <div class="left">
        <div class="ipone" style="padding: 0;">
          <img style="width: 100%;height: 100%;" :src="data.imageUrl" />
        </div>
        <span class="fl">商品编号：0468256644</span>
      </div>
      <div class="right">
        <div class="top-50" style="margin-bottom: -20px;">
          <h1>{{ data.name }} - 产自{{ data.address }}</h1>
          <p class="font-red">推荐选择下方[移动优惠购],手机套餐齐搞定,
            不用换号,每月还有花费返</p>
          <i style="margin-top: 30px;">
            <p class="fr">累计评价<span>612188</span></p>
            <div class="zuo fl">
              <p>价 &nbsp; 格</p>
              <p>促 &nbsp; 销</p>
            </div>
            <div class="you fl">
              <p><b>￥{{ data.price }}/吨</b>&nbsp;降价通知</p>
              <span>加购价</span>
              <p class="you1">满999.00另加20.00元，或满1999.00另加30.00元，
                或满2999.00另加40.00元，即可在购物车换</p>
              <p>购热销商品 详情 》</p>
            </div>
          </i>
        </div>
        <el-input v-model="shou" style="width: 200px;margin-right: 60px;" placeholder="请填写收货地址"></el-input>
        <span style="margin-right: 20px;">请选择规格/吨:</span><el-input-number size="mini" v-model="num" @change="handleChange"
          :min="1" :max="data.inventory" label="描述文字"></el-input-number>
        <span style="font-size: 16px;margin-left: 60px;">共 <i style="font-size: 26px;color: red;">{{ data.price * num *
          100 / 100 }}</i>
          元</span>
        <div class="top_50" style="margin-left: 260px;">
          <div class="six">
            <a @click="buy"><button class="gwc">确认购买</button></a>
            <i></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../style/chushihua.css'
import '../style/xiangqing.css'
import '../style/public.css'
import axios from 'axios'
export default {
  data() {
    return {
      data: '',
      num: 1,
      shou: '',
      name: ''
    }
  },
  mounted() {
    this.name = localStorage.getItem("username")
    console.log(this.$route.query.id);
    const id = this.$route.query.id
    axios.get("http://localhost/select/" + id).then((res) => {
      console.log(res);
      this.data = res.data[0]
    })
  },
  methods: {
    handleChange(value) {
      // console.log(value);
      this.num = value
    },
    buy() {
      const query = this.$route.query
      const name = localStorage.getItem("username")
      const order = {
        name: query.name,
        username: name,
        fa: query.address,
        shou: this.shou,
        num: this.num,
        pay: this.data.price * this.num
      }
      if (order.username == '') {
        this.$alert('您还未登录！', '提示', {
          confirmButtonText: '确定'
        });
      } else if (order.shou == '') {
        this.$alert('请选择收货地址！', '提示', {
          confirmButtonText: '确定'
        });
      } else {
        this.$confirm(`确认购买${this.num}吨${this.data.name}，共${this.data.price * this.num * 100 / 100}元,发往${order.shou}`, '提示', {
          confirmButtonText: '确认购买',
          cancelButtonText: '取消购买',
          type: 'warning'
        }).then(() => {
          query.inventory = query.inventory - this.num
          query.salesVolume = query.salesVolume * 1 + this.num
          console.log(query);
          // 更新库存 销量
          axios.post("http://localhost/modifyinventory", query).then((res) => {
            console.log(res);
          })
          console.log(name);
          console.log(order);
          // 添加订单
          axios.post("http://localhost/addorder", order).then((res) => {
            console.log(res);
            this.$alert('购买成功!', '提示', {
              confirmButtonText: '确定'
            });
            this.$router.push("/index")
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消购买'
          });
        });


      }
    },
    toReginter() {
      this.$router.push('/register')
    },
    toLogin() {
      this.$router.push('/login')
    },
    exit() {
      localStorage.removeItem("username")
      this.$router.push('/login')
    },
    to() {
      this.$route.push("/index")
    }
  }
}
</script>

<style>
body {
  background-color: #fff;
}
</style>